<template>
  <div class="about" style="position: relative">
    <!-- // select框绑定的值是selectVal，也就是treeData里的value -->
    <!-- {{ title }} -->
    <Select
      v-model="selectVal"
      placeholder="请选择"
      clearable
      ref="select"
      style="width: 100%"
    >
      <!-- // 设置一个input框用作模糊搜索选项功能 -->
      <!-- <el-input
          class="input"
          placeholder="请选择"
          prefix-icon="el-icon-search"
          v-model="treeFilter"
          size="mini"
          clearable
        ></el-input> -->
      <!-- // 设置一个隐藏的下拉选项，选项显示的是汉字label，值是value
        // 如果不设置一个下拉选项，下面的树形组件将无法正常使用 -->
      <el-option hidden key="id" :value="selectVal" :label="selectName">
      </el-option>
      <!-- // 设置树形控件 -->
      <el-tree
        :data="treeData"
        :props="defaultProps"
        @node-click="handleNodeClick"
        :expand-on-click-node="false"
        :check-on-click-node="true"
        :accordion="true"
        ref="tree"
        node-key="id"
        :default-expand-all="false"
        :filter-node-method="filterNode"
      >
        <!-- // @node-click：树形控件选项点击事件
        // :expand-on-click-node：使树形控件只有点箭头图标的时候才会展开或者收缩节点，为false则点文字直接选中该项
        // :check-on-click-node：是否在点击节点的时候选中节点，当选项为复选框时有用，这个属性可以删除
        // :default-expand-all：默认展开所有节点
        // :filter-node-method：实现搜索功能的筛选方法 -->

        <span slot-scope="{ data }">
          <!-- //选项用插槽来显示，匹配搜索功能，并方便增加tag标签需求 -->
          <span style="font-size: 0.8rem">{{ data.title }}</span>
          <!-- <el-tag
              size="mini"
              style="margin: 0 10px"
              v-show="filterorgType(data.tag)"
              >{{ filterorgType(data.tag) }}</el-tag
            > -->
        </span>
      </el-tree>
    </Select>
    <div class="lineheng" style="position: absolute; bottom: 0%"></div>
  </div>
</template>

<script>
import Select from "@/components/select/index.js";

export default {
  name: "el-select-tree",
  components: { Select},
  props: {
    treeData: Array,
    info: String,
    defaultProps: Object,
    title: String,
    catetype: Number,
  },
  data() {
    return {
      selectVal: "", // select框的绑定值
      selectName: "", // select框显示的name
      treeFilter: "", // 搜索框绑定值，用作过滤
      type: 0,
      // 树形控件数据
      // treeData: [
      //   {
      //     value: "1",
      //     label: "一级 1菈妮",
      //     tag: "wife",
      //     children: [
      //       {
      //         value: "1-1",
      //         label: "二级 1-1",
      //         children: [
      //           {
      //             value: "1-1-1",
      //             label: "三级 1-1-1",
      //           },
      //         ],
      //       },
      //     ],
      //   },
      //   {
      //     label: "一级 2",
      //     value: "2",
      //     children: [
      //       {
      //         value: "2-1",
      //         label: "二级 2-1",
      //         children: [
      //           {
      //             value: "2-1-1",
      //             label: "三级 2-1-1",
      //           },
      //         ],
      //       },
      //       {
      //         value: "2-2",
      //         label: "二级 2-2",
      //         children: [
      //           {
      //             value: "2-2-1",
      //             label: "三级 2-2-1鸡腿",
      //             tag: "princess",
      //           },
      //         ],
      //       },
      //     ],
      //   },
      //   {
      //     value: "3",
      //     label: "一级 3",
      //     children: [
      //       {
      //         value: "3-1",
      //         label: "二级 3-1",
      //         children: [
      //           {
      //             value: "3-1-1",
      //             label: "三级 3-1-1",
      //           },
      //         ],
      //       },
      //       {
      //         value: "3-2",
      //         label: "二级 3-2艾尔登法环",
      //         tag: "yyds",
      //         children: [
      //           {
      //             value: "3-2-1",
      //             label: "三级 3-2-1",
      //           },
      //         ],
      //       },
      //     ],
      //   },
      // ],
      // 标签数组
      // tagList: [
      //   { value: "wife", label: "老婆" },
      //   { value: "princess", label: "小公主" },
      //   { value: "yyds", label: "天下第一" },
      // ],
    };
  },
  watch: {
    info(newVal, oldVal) {
      if (!newVal) {
        this.selectVal = "";
        this.selectName = "";
        if (this.type == 2) {
          console.log(222222222222);
        } else {
          return;
        }
      }
      this.selectVal = this.info;
      this.selectName = this.title;
    },
    selectVal(newVal, oldVal) {
      if (!newVal || newVal.length == 0) {
        this.selectVal = "";
        this.selectName = "";
        if (this.type == 2 || this.catetype == "2") {
          console.log(11111111111);
        } else {
          return;
        }
      }
      this.$emit("getChildValue", {
        value: this.selectVal,
        type: this.type,
        title: this.selectName,
      });
    },
    // 搜索过滤，监听input搜索框绑定的treeFilter
    treeFilter(val) {
      this.$refs.tree.filter(val);
      // 当搜索框键入值改变时，将该值作为入参执行树形控件的过滤事件filterNode
    },
  },
  methods: {
    // 结构树点击事件
    handleNodeClick(data) {
      if (data.materialclasscode) {
        console.log("2222");
        //1 物料三类     2 地区  3  物料
        this.type = 1;
        this.selectVal = data.materialclasscode; // select绑定值为点击的选项的value
        this.selectName = data.title; // input中显示值为label
      } else {
        console.log("1111");
        this.type = 2;
        this.selectVal = data.areacode; // select绑定值为点击的选项的value
        this.selectName = data.title; // input中显示值为label
      }

      this.treeFilter = ""; // 点击后搜索框清空
      this.$refs.select.blur(); // 点击后关闭下拉框，因为点击树形控件后select不会自动折叠
    },
    // 模糊查询（搜索过滤），实质为筛选出树形控件中符合输入条件的选项，过滤掉其他选项
    filterNode(value, data) {
      if (!value) return true;
      let filterRes = data.label.indexOf(value) !== -1;
      return filterRes;
    },
    // 选项卡标签（可忽略，增值迭代需求）
    filterorgType(val) {
      let arr = this.tagList.filter((item) => {
        return item.value == val;
      });
      return arr.length ? arr[0].label : "";
    },
  },

  mounted() {
    this.selectVal = this.info;
    this.selectName = this.title;
  },
};
</script>

<style lang="scss" scoped>
.about {
  ::v-deep .el-icon-arrow-down {
    transform: rotateZ(180deg);
  }
  ::v-deep .el-input__inner {
    font-family: JCYT;
    border: none;
    background-color: transparent;
    border-radius: 0;
    font-size: 0.8rem;
  }
  ::v-deep .el-icon-arrow-up:before {
    content: "▲";
    color: #0054f9;
  }
  ::v-deep .el-scrollbar {
    padding-right: 2rem;
  }
  ::v-deep .el-select-dropdown {
    padding-right: 2rem;
  }
}

.input {
  width: 100%;
  font-size: 0.8rem;
}
</style>
